<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://unpkg.com/@antv/l7'></script>
    <script src="https://lib.baomitu.com/jquery/2.2.4/jquery.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        #map {
            width: 100vw;
            height: 100vh;
        }

        html,
        body {
            overflow: hidden;
        }

        #marker {
            text-align: center;
            background-color: #652e8092;
            line-height: 50px;
            color: #fff;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="map">

    </div>
    <script>
        // 从L7中导入场景和自带的高德图层类
        var { Scene, GaodeMap } = L7;
        // new一个场景
        const scene = new Scene({
            // 设置地图（场景）容器的挂载点
            id: 'map',
            // 设置场景的地图属性：new一个高德地图配置项
            // 设置style样式，center中心点，pitch俯仰角，zoom放大倍数。
            // token加或者不加都行。
            map: new GaodeMap({
                /* dark|light|normal */
                style: 'normal', // 样式URL
                center: [120.19382669582967, 30.258134],
                pitch: 50,
                zoom: 2,
                // token: '3851594382e218c49865a4d6a5170b52',
            }),
            // 场景的第三个属性是否可见logo，设置为不可见。
            logoVisible: false
        });
        /*
        1、侧重地理数据的展示
        2、map是作为场景Scene的一个属性
        Scene场景  使用地图来实现地理数据的可视化
         */
        /* L7
        阿里
        高德 --阿里  国内
        国际 mapbox
         */
        scene.on('loaded', () => {
            /* 类似mapbox */
            // 创建一个L7的Popup谈窗对象。
            // new L7.Popup()
            const popup = new L7.Popup({
                // 这个函数传一个参数，为一个对象
                // 这个对象的属性为 offsets
                // 表示偏移量为[0,50]
                // 设置其偏移量为offsets:[0,50]
                //（在标注点上方偏移50个像素），
                // x方向不偏移
                // y方向偏移50个像素。
                offsets: [0, 50]
            }).setText("hello world")
            // 弹窗内容为hello world
            // 
            // 创建一个标注
            // 设置标注所在的经纬度
            // 还可以将一个创建好的popup弹窗设置给这个标注
            // 通过setPopup方法，即可。
            const marker = new L7.Marker()
                .setLnglat([114, 30])
                .setPopup(popup);
            // 最后，将标注添加到场景中。
            scene.addMarker(marker);



            const popup2 = new L7.Popup({
                // 这个函数传一个参数，为一个对象
                // 这个对象的属性为 offsets
                // 表示偏移量为[0,50]
                // 设置其偏移量为offsets:[0,50]
                //（在标注点上方偏移50个像素），
                // x方向不偏移
                // y方向偏移50个像素。
                offsets: [0, 50]
            }).setText("hello world")
            // 除了默认的标注，还可以创建自定义的标注。
            /* 自定义标注类似mapbox */
            // 先自己创建一个div元素
            var element = document.createElement("div");
            // 给自己创建的这个元素，加一个/id属性。比如，就叫marker。
            element.id = "marker";
            // 创建一个marker对象。
            // 参数传一个对象，对象有一个element属性，属性值就是我们创建的这个元素对象。
            const custom_marker = new L7.Marker({
                element
            })
                .setLnglat({ lng: 120.30, lat: 30.50 }).setPopup(popup);
            // 设置经纬度和popup弹窗
            // 把自定义的marker添加到场景中。
            scene.addMarker(custom_marker)
        })

        // Ps.L7没办法嵌入openlayer。
    </script>
</body>

</html>